AJAX (Asynchronous JavaScript and XML) প্রযুক্তিতে XMLHttpRequest (XHR) একটি মূল উপাদান, যা ব্রাউজার এবং সার্ভারের মধ্যে ডেটা আদান-প্রদানের জন্য ব্যবহৃত হয়। এটি ওয়েব পেজ রিলোড ছাড়াই ডেটা লোড করা, সার্ভারের রিসোর্স থেকে ডেটা রিকোয়েস্ট করা, এবং সার্ভারে ডেটা পাঠানোর সুযোগ দেয়।
XMLHttpRequest এর কাজের পদ্ধতি
- রিকোয়েস্ট তৈরি করা: একটি
XMLHttpRequestঅবজেক্ট তৈরি করা হয়। - রিকোয়েস্ট কনফিগার করা:
open()মেথডের মাধ্যমে HTTP মেথড এবং ইউআরএল নির্ধারণ করা হয়। - রিকোয়েস্ট পাঠানো:
send()মেথড ব্যবহার করে রিকোয়েস্ট সার্ভারে পাঠানো হয়। - রেসপন্স পাওয়া: সার্ভার রেসপন্স করলে তা প্রক্রিয়া করার জন্য
onreadystatechangeইভেন্ট বাloadইভেন্ট ব্যবহার করা হয়।
XMLHttpRequest তৈরি এবং ব্যবহার
উদাহরণ: GET রিকোয়েস্ট
// XMLHttpRequest তৈরি
const xhr = new XMLHttpRequest();
// সার্ভারের সাথে সংযোগ স্থাপন
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
// রেসপন্স হ্যান্ডল করা
xhr.onload = function () {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
console.log(data); // ডেটা কনসোলে প্রদর্শিত হবে
} else {
console.error(`Error: ${xhr.status}`);
}
};
// রিকোয়েস্ট পাঠানো
xhr.send();
ব্যাখ্যা:
open(method, url, async):- HTTP মেথড (
GET,POST, ইত্যাদি) নির্ধারণ করা হয়। url: সার্ভারের রিকোয়েস্ট ইউআরএল।async: রিকোয়েস্ট অ্যাসিনক্রোনাস হলেtrue(ডিফল্ট), সিঙ্ক্রোনাস হলেfalse।
- HTTP মেথড (
onloadইভেন্ট:- রেসপন্স প্রাপ্ত হলে এটি চালিত হয়।
statusএবংresponseTextব্যবহার করে রেসপন্স প্রক্রিয়া করা হয়।
send():- রিকোয়েস্টটি সার্ভারে পাঠায়।
উদাহরণ: POST রিকোয়েস্ট
// XMLHttpRequest তৈরি
const xhr = new XMLHttpRequest();
// POST রিকোয়েস্ট কনফিগার করা
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
// রেসপন্স হ্যান্ডল করা
xhr.onload = function () {
if (xhr.status === 201) {
const data = JSON.parse(xhr.responseText);
console.log(data); // ডেটা কনসোলে প্রদর্শিত হবে
} else {
console.error(`Error: ${xhr.status}`);
}
};
// রিকোয়েস্ট পাঠানো
const newPost = {
title: 'AJAX Example',
body: 'This is an example of POST request using XMLHttpRequest.',
userId: 1
};
xhr.send(JSON.stringify(newPost));
ব্যাখ্যা:
setRequestHeader():- HTTP হেডার সেট করতে ব্যবহৃত হয়। এখানে
Content-TypeJSON নির্ধারণ করা হয়েছে।
- HTTP হেডার সেট করতে ব্যবহৃত হয়। এখানে
send(data):- সার্ভারে ডেটা পাঠানোর জন্য ব্যবহার করা হয়।
- ডেটাটি সাধারণত JSON ফরম্যাটে পাঠানো হয়।
XMLHttpRequest এর বিভিন্ন ইভেন্ট
১. onreadystatechange
এই ইভেন্টটি প্রতিবার readyState পরিবর্তন হলে ট্রিগার হয়। readyState পাঁচটি ধাপে পরিবর্তিত হতে পারে:
0: UNSENT – রিকোয়েস্ট তৈরি হয়েছে, কিন্তু এখনও পাঠানো হয়নি।1: OPENED –open()মেথড কল করা হয়েছে।2: HEADERS_RECEIVED – সার্ভার থেকে হেডার রিসিভ করা হয়েছে।3: LOADING – ডেটা লোড হচ্ছে।4: DONE – পুরো ডেটা লোড হয়ে গেছে এবং রেসপন্স প্রস্তুত।
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
}
};
২. onload
onload সরাসরি readyState এর DONE অবস্থায় ট্রিগার হয় এবং রেসপন্স প্রক্রিয়া করতে সহজ।
xhr.onload = function () {
if (xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
}
};
৩. onerror
যদি রিকোয়েস্টে কোনো ত্রুটি ঘটে, তবে onerror ইভেন্ট ট্রিগার হয়।
xhr.onerror = function () {
console.error('Request failed.');
};
XMLHttpRequest এর সুবিধা
- অ্যাসিনক্রোনাস রিকোয়েস্ট: পেজ রিলোড না করেই সার্ভার থেকে ডেটা লোড করা যায়।
- ডেটা ফরম্যাট: JSON, XML, HTML, বা সাধারণ টেক্সট ডেটা হ্যান্ডল করতে পারে।
- ব্রাউজার সমর্থন: প্রায় সব আধুনিক ব্রাউজার
XMLHttpRequestসমর্থন করে।
XMLHttpRequest এর সীমাবদ্ধতা
- কোড জটিলতা: নতুন ডেভেলপারদের জন্য
XMLHttpRequestএকটু বেশি জটিল হতে পারে। - CORS সমস্যা: ক্রস-অরিজিন রিকোয়েস্ট করার সময় নিরাপত্তাজনিত সীমাবদ্ধতা থাকতে পারে।
- বিকল্প প্রযুক্তি: Fetch API এবং Axios-এর মতো প্রযুক্তি আরও সহজ এবং আধুনিক সমাধান প্রদান করে।
Fetch API: আধুনিক বিকল্প
Fetch API হলো XMLHttpRequest এর একটি উন্নত বিকল্প, যা প্রমিস (Promise) ভিত্তিক এবং আরও সহজ। উদাহরণ:
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
সারাংশ
XMLHttpRequest AJAX রিকোয়েস্ট পরিচালনার একটি শক্তিশালী উপায়, যা ব্রাউজার এবং সার্ভারের মধ্যে ডেটা লোড এবং আদান-প্রদানের সুযোগ দেয়। যদিও Fetch API এবং অন্যান্য আধুনিক বিকল্পগুলো সহজ এবং উন্নত, XMLHttpRequest এখনো ওয়েব ডেভেলপমেন্টে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে। ডেভেলপারদের এটি শেখা এবং এর কার্যকারিতা বোঝা গুরুত্বপূর্ণ।
Read more
